<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h4>{{str}}</h4>
        <button @click="start">点击我,让文字动起来</button>
        <button @click="stop">停停停,给我停</button>

    </div>
    <script>
        new Vue({
            el : '#app',
            data : {
                str : '璇璇家的小白程序猿'
            },
            methods : {
                //想尽一切办法去操作data里面的东西
                start(){
                    let timer = setInterval(()=>{
                        let start = this.str.substring(0,1);
                        let end = this.str.substring(1);
                        this.str = end + start;
                    },500);
                    this.timer1 = timer;
                },
                stop(){
                    clearInterval(this.timer1);
                    this.timer1 = null;
                }


            }

        
        })
    
    
    </script>
</body>
</html>